p5.js 移動、回転、拡縮

(原点座標の)移動

code: translate.js

function setup() {

createCanvas(400, 400);

background(90, 200, 255);

}

function draw() {

fill(200, 200, 40);

noStroke();

rect(0, 0, 50, 50);

translate(50,50);

rect(0, 0, 50, 50);

translate(-50,50);

rect(0, 0, 50, 50);

}

(原点座標からの)回転

code: rotate.js

function setup() {

createCanvas(400, 400);

background(90, 200, 255);

}

function draw() {

fill(200, 200, 40);

noStroke();

rect(0, 0, 200, 20);

rotate(radians(45));

rect(0, 0, 200, 20);

}

移動と回転の組み合わせ

code: trans+rotate.js

function setup() {

createCanvas(400, 400);

background(90, 200, 255);

}

function draw() {

fill(200, 200, 40);

noStroke();

translate(200,200);

rect(-180, -10, 360, 20);

rotate(radians(45));

rect(-180, -10, 360, 20);

}

拡縮

code: scale.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(90, 200, 255);

noFill();

strokeWeight(5);

stroke(255);

translate(200,200);

rotate(radians(45));

rectMode(CENTER);

rect(0, 0, 100, 100);

scale(2);

//strokeWeight(5/2)

rect(0, 0, 100, 100);

}

参考文献

「Processingをはじめよう 第2版」

『Processing　ビジュアルデザイナーとアーティストのためのプログラミング入門』

https://gyazo.com/a9c3fe81af12cabfbd049e73a953ef6c